<%-- 
    Document   : index
    Created on : 22/08/2014, 04:28:55 PM
    Author     : clsma
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="init.jsp" %>
<!DOCTYPE html>
<%=CSS_DIALOG + SCRIPT_DIALOG%>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>

    </head>
    <body> 
        <style>
            .clase{
                background-color: black;
            }
        </style>
        <script type="text/javascript" >
            $(document).ready(function() {
                $('#abre').click(function(){
                try {
                    $("#modal").dialog('destroy');
                } catch (ex) {
                }

                $("#modal").dialog({
                    autoOpen: true,
                    resizable: false,
                    height: "auto",
                    width: "auto",
                    modal: true,
                    bgiframe: true,
                    draggable: true,
                    zIndex: 900,
                    title: "Prueba",
//                    open: function() {
//                        $('.ui-widget-overlay').css('position', 'fixed');
//                    },
                    buttons: {
                        "Cerrar": function() {
                            $(this).dialog("close");
                        }
                    }

                });
                });

                $('#boton').click(function() {
                    $.ajax({
                        type: 'POST',
                        url: $('form').attr('action'),
                        data: $('form').serialize(),
                        async: false,
                        success: function(data, textStatus, jqXHR) {
                            $('#resp').html(data);
                        }

                    });

                });

            });


        </script> 
        <div>
            <h1>Datos </h1>
            <input type="button" id="abre" value="Abre Modal">
        </div>
        <div id="modal" style="display: none">
            <div style="height: 500px;width: 500px;margin: 0 auto;border:1px solid black;">


                <form action="<%=RUTACONT%>/prueba/pruebaServlet" id="form">
                    <input type="text" name="nombre" id="nombre">
                    <input type="text" name="apellido" id="apellido">

                </form>
                <input type="button" id="boton" value="Seguir">
                <div style="width: 100%;height: 200px;margin: 10px auto;" id="resp"> </div>
            </div>
        </div>

    </body>
</html>
